<template>
  <div class="songs">
    <div class="label">
      <el-select v-model="label" placeholder="请选择" size="mini" @change="catChange">
        <el-option v-for="(item, index) in labellist" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <!-- <div class="hot_label">
        分类：
        <span v-for="(item, index) in categories" :key="index" @click="catChange(item.name)">{{ item.name }}</span>
      </div> -->
    </div>
    <!-- <div class="list">
      <div class="li">
        <div class="img">
          <img src="../../../assets/images/highquality.png" />
        </div>
        <span class="name">精品歌单倾心推荐，给最懂音乐的你</span>
      </div>
      <div class="li" v-for="(item, index) in playlists" :key="index">
        <div class="img">
          <img :src="item.coverImgUrl" />
          <div class="playCount"><i class="el-icon-headset"></i> {{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }}</div>
          <div class="nickname"><i class="iconfont icon-friend"></i>{{ item.creator.nickname }}</div>
          <i class="icon el-icon-video-play"></i>
        </div>
        <span class="name">{{ item.name }}</span>
      </div>
    </div> -->
    <div style="font-size: 20px; margin-top: 20px;">暂无接口，敬请期待！</div>
  </div>
</template>

<script>
import { getVideoGroupList, getVideoGroup } from '../../network/videomv.js'
export default {
  data () {
    return {
      id: 0,
      label: '现场',
      labellist: [],
      categories: [],
      videolist: []
    }
  },
  methods: {
    catChange (cat) {
      this.cat = cat
      this.getSongsList(this.order, this.cat)
    },
    getVideoGroupList () {
      getVideoGroupList().then(res => {
        // console.log(res.data)
        this.id = res.data.data[0].id
        res.data.data.forEach(item => {
          this.labellist.push({
            id: item.id,
            value: item.name,
            label: item.name
          })
        })
        // console.log(this.labellist)
      })
    },
    getVideoGroup (id) {
      getVideoGroup(id).then(res => {
        console.log(res.data)
      })
    }
  },
  created () {
    this.getVideoGroupList()
    // this.getVideoGroup(this.id)
  }
}
</script>

<style lang="less" scoped>
  .songs {
    width: 100%;
    margin: auto;
    .label {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .el-select {
        width: 120px;
        margin-top: 10px;
        float: left;
      }
      .hot_label {
        display: flex;
        justify-content: flex-start;
        font-size: 15px;
        cursor: pointer;
        span {
          padding: 0 15px;
          color: #666666;
          border-right: 1px solid #ceccd4;
        }
        span:last-child {
          border: none;
        }
      }
    }
    .list {
      width: 100%;
      margin: 20px 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .li {
        width: 18%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        .img {
          position: relative;
          width: 100%;
          img {
            width: 100%;
          }
          .playCount {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 25px;
            color: #fff;
            text-align: right;
            padding-right: 5px;
            background-image: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.4));
            transform: translateY(0);
            transition: transform 0.5s;
          }
          .nickname {
            position: absolute;
            color: #fff;
            bottom: 5%;
            left: 5%;
          }
          .el-icon-video-play {
            position: absolute;
            bottom: 5%;
            right: 3%;
            font-size: 0px;
            color: #ebebeb;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
          }
            .el-icon-video-play:hover {
              background: rgba(0, 0, 0, 0.5);
            }
        }
        .img:hover .el-icon-video-play {
          font-size: 35px;
        }
        .name {
          text-align: left;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
</style>

<style>
  .el-cascader-menu {
    height: 300px;
  }
</style>
